<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { GetCatePayloadType, GetCateResType, Cate } from '@/api/cate/types'

import EditCate from './components/editCate.vue'

import mock from '~mock/cate'

import { reactive, ref } from 'vue'
import { useConfirm } from '@/hooks/useConfirm'

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<GetCatePayloadType>({
	pagenum: 1,
	pagesize: 10
})

// 表格数据
const tableData = reactive<GetCateResType>({
	data: mock.data,
	total: mock.total
})

console.log('mock数据：', mock.data)

// 分页
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}

// 编辑分类逻辑
const editCateRef = ref()
const handleEditCate = (row: Cate) => {
	editCateRef.value.status = true
	Object.assign(editCateRef.value.formData, {
		name: row.name,
		pid: row.pid
	})
}

// 删除分类
const handleDelete = (id: number | string) => {
	console.log(id)
	useConfirm()
}
</script>

<template>
	<QfBox :filter="false">
		<!-- 内容 -->
		<!-- 逻辑/页面组件 -->
		<EditCate ref="editCateRef" />
		<!-- 逻辑/页面组件 -->

		<!-- 表格 -->
		<el-table :data="tableData.data" :border="true" row-key="id">
			<el-table-column align="center" label="分类编号" prop="id" width="180"></el-table-column>
			<el-table-column align="center" label="分类名称" prop="name"></el-table-column>
			<el-table-column align="center" label="分类层级" width="120">
				<template #default="scope">
					<el-tag :type="['success', 'info', 'warning'][scope.row.level - 1]">
						{{ ['一级', '二级', '三级'][scope.row.level - 1] }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="创建于" prop="created_at" width="180"></el-table-column>
			<el-table-column align="center" label="更新于" prop="updated_at" width="180"></el-table-column>
			<el-table-column align="center" label="操作" fixed="right" width="240">
				<template #default="scope">
					<el-button type="primary" size="small" @click="handleEditCate(scope.row)">
						<span class="iconfont icon-bianji"></span>
					</el-button>
					<el-button type="danger" size="small" @click="handleDelete(tableData.data[scope.$index].id)"
						><span class="iconfont icon-shanchu"></span>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 -->

		<!-- 分页 -->
		<el-pagination
			background
			v-model:current-page="formData.pagenum"
			v-model:page-size="formData.pagesize"
			:page-sizes="[10, 50, 100, 150]"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableData.total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
		<!-- 分页 -->
		<!-- 内容 -->
	</QfBox>
</template>

<style lang="scss" scoped></style>
